فارسی

بررسی عمیق مسیرهای رهگیری در Next.js، با نمایش استراتژی‌های پیاده‌سازی عملی مودال و روکش برای بهبود تجربه کاربری.

مسیرهای رهگیری در Next.js: تسلط بر الگوهای مودال و روکش (Overlay)

Next.js، یک فریمورک محبوب ری‌اکت، ویژگی‌های قدرتمندی برای ساخت اپلیکیشن‌های وب پرفورمنس و مقیاس‌پذیر ارائه می‌دهد. یکی از این ویژگی‌ها، مسیرهای رهگیری (Interception Routes)، روشی پیشرفته برای مدیریت سناریوهای مسیریابی پیچیده، به ویژه هنگام پیاده‌سازی الگوهای مودال و روکش (overlay)، فراهم می‌کند. این راهنمای جامع به بررسی چگونگی استفاده از مسیرهای رهگیری برای ایجاد تجارب کاربری یکپارچه و جذاب می‌پردازد.

مسیرهای رهگیری چه هستند؟

مسیرهای رهگیری به شما این امکان را می‌دهند که یک مسیر را رهگیری کرده و یک رابط کاربری متفاوت را بدون تغییر URL در مرورگر رندر کنید. به آن به عنوان یک انحراف موقت فکر کنید که تجربه کاربری را غنی‌تر می‌کند. این ویژگی به خصوص برای موارد زیر مفید است:

چرا از مسیرهای رهگیری برای مودال‌ها و روکش‌ها استفاده کنیم؟

روش‌های سنتی مدیریت مودال‌ها و روکش‌ها اغلب شامل مدیریت حالت (state) در یک کامپوننت است که می‌تواند پیچیده شده و منجر به مشکلات عملکردی شود. مسیرهای رهگیری چندین مزیت ارائه می‌دهند:

راه‌اندازی مسیرهای رهگیری در Next.js

بیایید با یک مثال عملی نحوه پیاده‌سازی مسیرهای رهگیری را نشان دهیم: ایجاد یک مودال برای نمایش جزئیات محصول در یک اپلیکیشن تجارت الکترونیک.

ساختار پروژه

ابتدا، ساختار دایرکتوری را تعریف کنیم. فرض کنید یک دایرکتوری `products` داریم که در آن هر محصول یک شناسه منحصر به فرد دارد.

app/
  products/
    [id]/
      page.js       // صفحه جزئیات محصول
    @modal/
      [id]/
        page.js   // محتوای مودال برای جزئیات محصول
    default.js  // لایه برای دایرکتوری محصولات
  page.js           // صفحه اصلی

توضیحات

پیاده‌سازی کد

۱. صفحه اصلی (app/page.js)

این صفحه لیستی از محصولات را نمایش می‌دهد که هر کدام لینکی دارند که جزئیات محصول را در یک مودال باز می‌کند.

// app/page.js
import Link from 'next/link';

const products = [
 { id: '1', name: 'لپ‌تاپ' },
 { id: '2', name: 'گوشی هوشمند' },
 { id: '3', name: 'تبلت' },
];

export default function Home() {
 return (
 

لیست محصولات

    {products.map((product) => (
  • {product.name}
  • ))}
); }

۲. صفحه جزئیات محصول (app/products/[id]/page.js)

این صفحه جزئیات کامل محصول را رندر می‌کند. در یک اپلیکیشن واقعی، این داده‌ها از یک API یا پایگاه داده دریافت می‌شود. نکته مهم این است که این صفحه یک لینک بازگشت به لیست اصلی محصولات فراهم می‌کند.

// app/products/[id]/page.js
import Link from 'next/link';

export default function ProductDetails({ params }) {
 const { id } = params;

 return (
 

جزئیات محصول

شناسه محصول: {id}

این صفحه کامل جزئیات محصول است.

بازگشت به لیست محصولات
); }

۳. محتوای مودال (app/products/@modal/[id]/page.js)

این بخش حیاتی است – مسیر رهگیری. این کامپوننت محتوای مودال را با استفاده از همان شناسه محصول رندر می‌کند. به هوک `useParams` برای دسترسی به شناسه توجه کنید.

// app/products/@modal/[id]/page.js
'use client';

import { useParams } from 'next/navigation';
import styles from './modal.module.css';

export default function ProductModal() {
 const params = useParams();
 const { id } = params;

 return (
 

مودال محصول

شناسه محصول: {id}

این محتوا در یک مودال رندر شده است!

history.back()}>بستن مودال
); }

نکته: دستور `'use client';` برای تعاملات سمت کلاینت، به ویژه هنگام استفاده از `useParams`، ضروری است.

استایل‌دهی (modal.module.css): یک ماژول CSS ساده برای استایل‌دهی اولیه مودال استفاده شده است. این برای موقعیت‌دهی صحیح مودال حیاتی است.

/* modal.module.css */

.modalOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* اطمینان از قرار گرفتن در بالا */
}

.modalContent {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  width: 80%;
  max-width: 600px;
}

۴. لایه (app/products/default.js)

این لایه مسیر `@modal` را در بر می‌گیرد و اطمینان می‌دهد که در زمینه محصولات رندر می‌شود.

// app/products/default.js
export default function ProductsLayout({ children }) {
 return (
 
{children}
); }

چگونه کار می‌کند

  1. وقتی کاربر روی لینک یک محصول در صفحه اصلی کلیک می‌کند (مثلاً `/products/1`)، Next.js این را به عنوان یک مسیر در دایرکتوری `products` تشخیص می‌دهد.
  2. به دلیل وجود مسیر رهگیری `@modal`، Next.js بررسی می‌کند که آیا مسیر منطبقی زیر `@modal` وجود دارد یا خیر.
  3. اگر یک تطابق پیدا شود (مثلاً `/products/@modal/1`)، Next.js محتوای `app/products/@modal/[id]/page.js` درون صفحه فعلی رندر می‌کند. URL در مرورگر `/products/1` باقی می‌ماند.
  4. استایل‌های `modalOverlay` مودال را بر روی محتوای زیرین قرار می‌دهد.
  5. کلیک کردن روی "بستن مودال" از `history.back()` برای بازگشت استفاده می‌کند، که به طور موثر مودال را می‌بندد و به حالت قبلی بازمی‌گردد.

تکنیک‌های پیشرفته مسیرهای رهگیری

۱. مدیریت دکمه بازگشت

یک جنبه حیاتی در پیاده‌سازی مودال، اطمینان از رفتار صحیح دکمه بازگشت مرورگر است. وقتی کاربر یک مودال را باز می‌کند و سپس دکمه بازگشت را کلیک می‌کند، در حالت ایده‌آل باید مودال بسته شده و به زمینه قبلی بازگردد، نه اینکه از اپلیکیشن خارج شود.

متد `history.back()` که در مثال استفاده شد، این اثر را با بازگشت یک مرحله در تاریخچه مرورگر ایجاد می‌کند. با این حال، برای سناریوهای پیچیده‌تر، ممکن است نیاز به پیاده‌سازی یک کنترل‌کننده سفارشی برای دکمه بازگشت داشته باشید که وضعیت مسیریابی فعلی را در نظر بگیرد.

۲. محتوای مودال پویا

در اپلیکیشن‌های واقعی، محتوای مودال به احتمال زیاد پویا خواهد بود و بر اساس شناسه محصول از یک API یا پایگاه داده دریافت می‌شود. شما می‌توانید از `fetch` API یا یک کتابخانه دریافت داده مانند SWR یا React Query در کامپوننت مودال برای بازیابی داده‌های لازم استفاده کنید.

// app/products/@modal/[id]/page.js
'use client';

import { useParams } from 'next/navigation';
import { useState, useEffect } from 'react';

export default function ProductModal() {
 const params = useParams();
 const { id } = params;
 const [product, setProduct] = useState(null);

 useEffect(() => {
 async function fetchProduct() {
 const res = await fetch(`/api/products/${id}`); // با اندپوینت API خود جایگزین کنید
 const data = await res.json();
 setProduct(data);
 }

 fetchProduct();
 }, [id]);

 if (!product) {
 return 

در حال بارگذاری...

; } return (

{product.name}

{product.description}

{/* ... other product details ... */} history.back()}>بستن مودال
); }

۳. مودال‌های تودرتو

مسیرهای رهگیری می‌توانند برای ایجاد جریان‌های کاری مودال پیچیده، تودرتو شوند. به عنوان مثال، یک کاربر ممکن است مودال جزئیات محصول را باز کند و سپس روی دکمه‌ای کلیک کند تا مودال یک محصول مرتبط باز شود. این کار با ایجاد مسیرهای رهگیری اضافی در دایرکتوری `@modal` قابل دستیابی است.

۴. مدیریت خطاهای 404

سناریویی را در نظر بگیرید که کاربر به URL یک مودال با شناسه محصول نامعتبر (مثلاً `/products/@modal/nonexistent`) می‌رود. شما باید مدیریت خطای مناسبی را برای نمایش یک صفحه 404 کاربرپسند یا هدایت کاربر به یک صفحه محصول معتبر پیاده‌سازی کنید.

// app/products/@modal/[id]/page.js

// ... (بقیه کامپوننت)

 if (!product) {
 return 

محصول یافت نشد.

; // یا هدایت به صفحه 404 } // ... (بقیه کامپوننت)

۵. الگوهای روکش (Overlay)

در حالی که مثال‌ها بر روی مودال‌ها متمرکز بوده‌اند، مسیرهای رهگیری می‌توانند برای روکش‌ها نیز استفاده شوند. به جای مرکزیت دادن به محتوا، روکش ممکن است به صورت یک نوار کناری یا یک پنل که از کنار صفحه وارد می‌شود، ظاهر شود. استایل‌دهی CSS متفاوت خواهد بود، اما منطق مسیریابی همان باقی می‌ماند.

مثال‌های واقعی و موارد استفاده

مثال: پلتفرم تجارت الکترونیک بین‌المللی فرض کنید یک سایت تجارت الکترونیک جهانی دارید. وقتی کاربر روی یک محصول کلیک می‌کند، جزئیات در یک مودال باز می‌شود. URL به `/products/[product_id]` تغییر می‌کند که امکان لینک‌دهی مستقیم و مزایای سئو را فراهم می‌کند. اگر کاربر زبان را در صفحه مودال تغییر دهد (مثلاً از انگلیسی به اسپانیایی)، جزئیات محصول به زبان انتخاب شده دریافت می‌شود و محتوای مودال به طور یکپارچه به‌روزرسانی می‌شود. علاوه بر این، سایت می‌تواند مکان کاربر را (با رضایت) تشخیص داده و اطلاعات حمل و نقل مرتبط با منطقه آن‌ها را در مودال نمایش دهد.

بهترین شیوه‌ها برای استفاده از مسیرهای رهگیری

جایگزین‌های مسیرهای رهگیری

در حالی که مسیرهای رهگیری یک راه‌حل قدرتمند برای الگوهای مودال و روکش ارائه می‌دهند، رویکردهای دیگری نیز می‌توانند در نظر گرفته شوند:

نتیجه‌گیری

مسیرهای رهگیری Next.js یک روش قوی و زیبا برای پیاده‌سازی الگوهای مودال و روکش در اپلیکیشن‌های وب شما فراهم می‌کنند. با بهره‌گیری از این ویژگی قدرتمند، می‌توانید تجارب یکپارچه، سازگار با سئو و کاربرپسند ایجاد کنید. در حالی که رویکردهای جایگزین وجود دارند، مسیرهای رهگیری ترکیبی منحصر به فرد از مزایا را ارائه می‌دهند که آن‌ها را به ابزاری ارزشمند در جعبه ابزار هر توسعه‌دهنده Next.js تبدیل می‌کند.

منابع بیشتر